<template id="try_eat">
    <div class="try_m" style="overflow-x: hidden">
        <div style="position:fixed;top:0;left:0;height:0.74rem;width:100%">
            <div class="try_eat_top">
                <img src="../image/blue_da.png" alt="" @click="get_tui()">
                <h4>会员试吃</h4>
                <span @click="get_Past_members()">往期试吃</span>
            </div>
        </div>
        <div style="height:0.74rem;width:100%">

        </div>
        <div class="try_eat_ban">
            <img src="../image/try_eat.jpg" alt="">
        </div>
        <div class="try_eat_1">
            <p>新品试吃·邀你共享</p>
            <p>好货新口味 快快来品尝</p>
        </div>
        <!--新版的试吃商品列表-->
          <div class="try_eat_one">
                    <div class="try_eat_one_1"><img id="trial_img" v-bind:src="data.img" alt=""></div>
                     <p class="try_eat_one_p" id="trial_title">{{data.title}}</p>
                      <ul class="try_eat_one_list">
                  <li>
                      <p>数量:{{data.number}}份</p>
                      <p>售价:{{data.price}}元</p>
                  </li>
                  <li>
                      <p>{{data.used_number}}</p>
                      <p>人已申请试吃</p>
                  </li>
              </ul>
                        <p class="try_eat_one_time">本场还剩 {{data.time}}</p>
          </div>
       <!-- <div class="try_list">
            <div class="try_bu_mmg" v-for="sel in tag">
                <div class="try_li_st">
                    <div class="try_x_m"><img class="img_l1"  :src="sel.thumb" alt="" @click="getDetail(sel.id)"></div>
                    <div class="try_x_right">
                        <h2 @click="getDetail(sel.id)">{{sel.name}}</h2>
                        <p @click="getDetail(sel.id)">{{sel.brief}}</p>
                        <div class="try_Select_price">
                            <span @click="getDetail(sel.id)"><strong>{{sel.shop_price}}</strong>/200g*2</span>
                            <span>申请试吃</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <div class="try_shuo_m">
                <p id="wen_s">试吃说明</p>
            <div class="try_gmm" v-html="data.ext_info">
              
            </div>
        </div>
        <p style="height:1.6rem;"></p>
        <!--底部浮动-->
        <p class="try_tebie">
            <span>上传截图申请试吃
            <input type="file" class="files"  @change="user_trial($event)">
            <input type="hidden" v-model="source" >
            </span>


            <span @click="share()">分享朋友圈试吃</span>
        </p>

    </div>
</template>
<script>
    export default{
        name: 'try_eat',
        data() {
            return {
                data:[],
                source:'trial',
            }
        },
        mounted:function () {
               let H=$(window).height();
               $('.try_m').height(H);
                
               //获取试吃详细
               let info  = [];
               info['c'] = 'Member';
               info['m'] = 'trial_goods_info';
               this.GLOBAL.getApi(this,info);
               

               //初始化分享
                if(init.isWeiXin()){
                    share.share_wx();
                    share.type ='trial';
                    share.share();
                }else{
                    share.type ='trial';
                    share.share_web()
                }
        },
        methods:{
            get_Past_members:function(){
                this.$router.push('/Past_members')
            },
            get_tui:function(){
                window.history.go(-1);
            },
            share(){
                let is_wx = init.isWeiXin();
                if(is_wx){
                   alert("请从右上角点击分享");
                   return; 
                }else{
                   //页面分享
                    if(!init.getCookie('uid') && !init.getCookie('time') && !init.getCookie('token')){
                         alert("请登录分享");
                    }else{
                         $("#share_web").click();
                    }
                  
                }
            },
            user_trial(event){
                this.file = event.target.files[0];
                
                let form = {"image":this.file,"source":this.source}             
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);

                this.$ajax.post(url, Data).then((res) => {
                    if(res.data.code == 200){
                        let img = res.data.data;
                        this.send_trial(img);
                        return;
                    }else{
                        this.GLOBAL.center_error(this,res.data);        
                        return;
                    }       
                }).catch((err) => {
                    console.log(err);
                })
            },
            send_trial(img){
              
                let info    = [];
                info['c']   = 'Member';
                info['m']   = 'trial_user_send';
                info['id']  = this.data.id;
                info['img'] = img;

                //初始化个人信息
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(info);

                console.log(Data);
                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        alert("申请上传成功,请等待处理结果");
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }                 
                 })

                console.log(data);
            }

        },

    };

</script>
<style>
    /* .showimg{
         position: relative;
         width:1.11rem;
         height: 1.09rem;
         display:block;
        }*/
     .try_tebie span:nth-of-type(1) .files {
        position: absolute;
        font-family: Arial;
        width: 3rem;
        height: 1.2rem;
        cursor: pointer;
        background-color: #999999;
        opacity: 0;
        z-index: 3;
        left: 0px;
        top: 0px;
     }
    .try_tebie span:nth-of-type(1){
        position:relative;
    }
    .try_tebie{
        display:flex;
        width:100%;

        position:fixed;
        bottom:0;
        left:0;
        background: -webkit-linear-gradient(left, #7cceff 0, #2fb0fc 50%);
        background: -o-linear-gradient(right, #7cceff 0, #2fb0fc 50%);
        background: -moz-linear-gradient(right,  #7cceff 0, #2fb0fc 50%);
        background: linear-gradient(to right, #7cceff 0, #2fb0fc 50%);

    }
     .try_tebie span{
         flex:1;
         height:1rem;
         line-height:1rem;
         text-align:center;
         color:#ffffff;
         font-size:0.3rem;
     }
    /*footer*/
    .try_eat_one_time{
            line-height:0.8rem;
        height:0.8rem;
        color:#373737;
        font-size:0.24rem;
        text-align:center;
    }
    .try_eat_one_list li:nth-of-type(2) p:nth-of-type(2){
        height:0.24rem;
        line-height:0.24rem;
        color: #373737;
        font-size:0.24rem;
        text-indent:0.4rem;
    }
    .try_eat_one_list li:nth-of-type(2) p:nth-of-type(1){
        height:0.47rem;
        color:#36b2fc;
        font-size:0.3rem;
        text-indent:0.4rem;
    }
    .try_eat_one_list li:nth-of-type(1) p:nth-of-type(2){
        height:0.24rem;
        line-height:0.24rem;
        color: #000000;
        font-size:0.24rem;
        text-indent:1.49rem;
    }
    .try_eat_one_list li:nth-of-type(1) p:nth-of-type(1){
         height:0.24rem;
        line-height:0.24rem;
        color: #373737;
        font-size:0.24rem;
        text-indent:1.49rem;
        margin-bottom:0.24rem;
    }
    .try_eat_one_list li:nth-of-type(1){
        border-right:0.01rem solid #d4d4d4;
    }
    .try_eat_one_list li{
        list-style:none;
        flex:1;
        height:0.7rem;
    }
    .try_eat_one_list{
        width:100%;
        height:0.7rem;
        display:flex;
        margin-bottom:0.15rem;
    }
    .try_eat_one_p{
        width:100%;
        height:1.02rem;
        line-height:1.02rem;
        text-align:center;
        color:#373737;
        font-size:0.3rem;
        margin-bottom:0.07rem;
    }
    .try_eat_one_1{
        width:100%;
        height:4.42rem;
    }
    .try_eat_one_1 img{
        display:block;
        height:4.42rem;
        width:100%;
    }
    .try_eat_one{
        width:100%;
        min-height:7rem;
        border-bottom:0.1rem solid #f5f4f2;
    }
    /*新品试吃列表*/
    .try_gmm p{
        list-style:none;
        min-height:0.44rem;
        line-height:0.44rem;
        color:#bdbdbd;
        font-size:0.22rem;
        padding-left:0.2rem;
        width:5.8rem;
    }
    .try_gmm{
        width:100%;
        min-height:1rem;
    }
   #wen_s{
        height:0.57rem;
        color:#353535;
        font-size:0.26rem;
        text-indent:0.18rem;
        font-weight:700;
        line-height:0.57rem;
    }
    .try_shuo_m{
        width:100%;
        min-height:0.77rem;
        padding-top:0.23rem;
    }
    /*文案说说明*/
   /* .try_list .try_bu_mmg:last-of-type{
        border-bottom:0;
    }
    .try_bu_mmg{
        height:2.29rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
    }
    .try_li_st{
        height:2.26rem;
        width:5.95rem;
        margin:0 auto;
        display:flex;
        !*   flex-wrap: wrap;*!
        justify-content:flex-start;
        !*  border-bottom:0.01rem solid #f0f0f0;*!
    }
    .try_Select_price{
        height:0.68rem;
        position:relative;
        top:0;
    }
    .try_Select_price span:nth-of-type(2){
        display:block;
        height:0.42rem;
        width:1.34rem;
        position:absolute;
        color:#ffffff;
        font-size:0.28rem;
        line-height:0.42rem;
        text-align:center;
        border-radius:0.2rem;
        background: -webkit-linear-gradient(left, #7cceff , #2fb0fc); !* Safari 5.1 - 6.0 *!
        background: -o-linear-gradient(right, #7cceff, #2fb0fc); !* Opera 11.1 - 12.0 *!
        background: -moz-linear-gradient(right,  #7cceff, #2fb0fc); !* Firefox 3.6 - 15 *!
        background: linear-gradient(to right, #7cceff, #2fb0fc); !* 标准的语法（必须放在最后） *!
        top:0.1rem;
        right:0;

    }
    .try_Select_price span:nth-of-type(1){
        display:block;
        color:#fc1dac;
        font-size:0.18rem;
        width:2rem;
        height:0.68rem;
        line-height:0.68rem;
    }
    .try_Select_price strong{
        font-size:0.24rem;
    }
   !* .try_Select_price img{
        display:block;
        position:absolute;
        top: -0.08rem;
        right:0.2rem;
        height:0.6rem;
        width:0.6rem;
    }*!
    .try_x_m{
        !* flex:1;*!
        height:2.26rem;
        width:2.12rem;
    }
    .try_x_m img{
        !* display:block;*!
        width:2rem;
        height:2rem;
        margin:0 auto;
    }
    .try_x_right{
        height: 1.76rem;
        width:3.84rem;
        !* flex: 1;*!
        padding-top: 0.5rem
    }
    .try_x_right h2{
        height:0.42rem;
        color:#4a4a4a;
        font-size:0.28rem;
        line-height:0.25rem;
        font-weight:normal;
    }
    .try_x_right p{
        height:0.35rem;
        color:#bababa;
        font-size:0.19rem;
        line-height:0.19rem;
    }
    .try_list{
        min-height:2.3rem;
        width:100%;
    }*/
    /*试吃商品列表*/
    .try_eat_1 p:nth-of-type(1){
        height:0.45rem;
        line-height:0.45rem;
        text-align:center;
        color:#303030;
        font-size:0.24rem;
    }
    .try_eat_1 p:nth-of-type(2){
        height:0.34rem;
        line-height:0.34rem;
        text-align:center;
        color:#a1a1a1;
        font-size:0.2rem;
    }
    .try_eat_1{
        width:100%;
        height:0.98rem;
        padding-top:0.4rem;
        border-bottom:0.01rem solid #f0f0f0;
    }
    /*1*/
    .try_eat_ban{
        width:100%;
        height:2.56rem;
    }
    .try_eat_ban img{
        display:block;
        height:2.56rem;
        width:100%;
    }
    /*1*/
    .try_eat_top{
        height:0.74rem;
        width:100%;
      /*  border-bottom:1px solid #f0f0f0;*/
        position:relative;
        background:#ffffff;
    }
    .try_eat_top img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .try_eat_top h4{
        height:0.74rem;
        color:#2eaffc;
        font-size:0.3rem;
        line-height:0.74rem;
        text-align:center;
        font-weight:normal;
    }
    .try_eat_top span{
        display:block;
        height:0.74rem;
        line-height: 0.74rem;
        font-size:0.26rem;
        color:#2eaffc;
        position:absolute;
        right:0.24rem;
        top:0;
    }
</style>
